<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="dialogTitle"
    width="70%"
    @close="handleClose"
  >
    <el-row class="header">
      <el-table :data="tableData" border style="width: 100%">
        <!--        <el-table-column prop="id" label="编号" />-->
        <el-table-column prop="checkin.name" label="车主名" />
        <el-table-column prop="accessories.name" label="配件名称" />
        <el-table-column prop="maintainRecord.des" label="描述" style="width: 100px" />
        <el-table-column prop="materialCount" label="物料数量"/>
        <el-table-column prop="createTime" label="单据创建时间" :formatter="formatTime" />
        <el-table-column prop="maintainRecord.speedStatus" label="领料状态" />
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="primary" @click="handleEdit(row)">申请物料</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </el-dialog>
</template>

<script setup>
import { defineEmits, ref, defineProps, watch, onMounted } from 'vue'
import { list } from '../../../api/material'
import { modify } from '@/api/maintainRecord'
import { save } from '@/api/picking'
import { ElMessage } from 'element-plus'

const form = ref({
  id: '',
  accessoriesId: '',
  recordId: '',
  materialCount: '',
  count: ''
})

const tableData = ref([])
const total = ref(0)

async function query() {
  const resp = await list(form.value)
  tableData.value = resp.data.data.list
  total.value = resp.data.data.total
}

onMounted(() => {
  query()
})

const props = defineProps({
  // 标题
  dialogTitle: {
    type: String,
    default: '',
    required: true
  },
  // 编辑行数据
  dialogRowValue: {
    type: Object,
    default: () => {}
  }
})
// 监听props.dialogRowValue值改变
watch(
  () => props.dialogRowValue,
  () => {
    // console.log(props.dialogRowValue)
    form.value = props.dialogRowValue
  },
  { deep: true, immediate: true }
)

const isDisabled = ref(true)
onMounted(() => {
  if (props.dialogTitle === '编辑') {
    isDisabled.value = true
  }
})
const emits = defineEmits(['update:modelValue', 'query'])
// 申请领料
async function handleEdit() {
  // console.log(form.value.signStatus)
  form.value.signStatus = 1
  form.value.pickingStatus = 1
  form.value.count = form.value.materialCount
  await modify(form.value) // 修改领料状态
  await save(form.value) // 生成领料信息
  ElMessage({
    message: '申请领料成功！！',
    type: 'success'
  })
  // 上层组件重新获取数据
  emits('query')
  handleClose()
}

// 关闭
function handleClose() {
  emits('update:modelValue', false)
}
function formatTime(row, column) {
  const date = new Date(row[column.property])
  const year = date.getFullYear()
  let month = date.getMonth() + 1
  if (month < 10) {
    month = '0' + month
  }
  let day = date.getDate()
  if (day < 10) {
    day = '0' + day
  }
  return year + '-' + month + '-' + day
}
</script>

<style lang="scss" scoped>
::v-deep .el-input__prefix-inner {
  align-items: center;
}
</style>
